<template>
  <div class="addTemp">
    <div class="top-radio">
      <el-radio-group v-model="stepRadio" @change="changeNav">
      <el-radio-button label="1">基础信息</el-radio-button>
      <el-radio-button label="2">图文</el-radio-button>
    </el-radio-group>
    </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="site-form"
      v-show="stepRadio=='1'"
    >
      <el-form-item label="模版名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="域名类型" prop="host_type">
        <el-radio-group v-model="ruleForm.host_type" :disabled="disabledRadio">
          <el-radio :label=0>华寿域名</el-radio>
          <el-radio :label=1>华寿外域名</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="主体域名" prop="host">
        <el-input v-model="ruleForm.host"></el-input>
      </el-form-item>
      <el-form-item label="落地页价格" prop="price">
    <el-select v-model="ruleForm.price" placeholder="请选择落地页价格" @change="changePrice">
      <el-option
            v-for="item in priceOptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="支付场景" prop="scenes">
        <el-radio-group v-model="ruleForm.scenes" disabled>
          <el-radio :label=1>微信内支付</el-radio>
          <el-radio :label=0>微信外支付</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="表单">
    <el-switch v-model="ruleForm.is_form"></el-switch>
  </el-form-item>
  <el-form-item label="问卷">
    <el-switch v-model="ruleForm.is_question" :disabled="isQuestionFlag"></el-switch>
  </el-form-item>
  <el-form-item label="主题配色" prop="theme_color">
    <el-select v-model="ruleForm.theme_color" placeholder="请选择主题配色">
      <el-option
            v-for="item in colorOptions"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
    </el-select>
  </el-form-item>
    </el-form>
    <div class="pic" v-show="stepRadio=='2'" >
      <div class="pic-title">
        <div v-for="(item,index) in singlePicName" :key="item.id">
          {{ item.name }}
          <singlePic :id="item.id" :file="ruleForm.pics" @singlePic="forSingle"></singlePic>
        </div>
        <div>
           详情图片
          <groupPic :file="ruleForm.pics" @groupPic="forGroup"></groupPic>
        </div>
      </div>
    </div>
    <div class="footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" v-show="stepRadio=='1'"  @click="submitForm">下一步</el-button>
        <el-button type="primary" v-show="stepRadio=='2'" @click="report">发布</el-button>
      </div>
  </div>
</template>
<script>
import singlePic from '@/components/singlePicUpload'
import groupPic from '@/components/groupPicUpload'
import { getPriceList } from "@/api/order";
import { addMd,updateMd,checkNameExists } from '@/api/landPage.js'
export default {
  props: {
    closeFlag: {
      type: Boolean,
      default: false,
    },
    updateItem:{},
    copyItem:{}
  },
  components:{
     singlePic,
     groupPic
    },
  data() {
    return {
      disabledRadio:false,
      isQuestionFlag:false,
      stepRadio:'1',
      headPic:'',
      footPic:'',
      detailPic:[],
      priceOptions:[],
      colorOptions:[{
        label:'红色',
        value:"#FFD69E,#BD0700,#BD0700"
      },
      {
        label:'深绿色',
        value:"#C3F3D3,#089361,#FF7200"
      },
      {
        label:"浅绿色",
        value:"#FFFFFF,#1ACE9A,#1ACE9A"
      },
    ],
      singlePicName:[
        {
          id:0,
          name:'头图'      
        },
        {
          id:1,
          name:'底部悬浮栏'      
        }
      ],
      ruleForm: {
        name:'',
        host:'',
        price:'',
        is_form:false,
        is_question:false,
        scenes:0,
        host_type:'',
        theme_color:'',
        pics:[]
      },
      rules: {
        name: [
            { required: true, message: '请输入模版名称', trigger: 'blur' },
            { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
          ],
        host: [
            { required: true, message: '请输入主体域名', trigger: 'blur' },
        ],
        price:[
            { required: true, message: '请选择落地页价格', trigger: 'change' }
        ],
        scenes:[ 
            { required: true, message: '请选择支付场景', trigger: 'change' }
        ],
        host_type:[ 
            { required: true, message: '请选择域名类型', trigger: 'change' }
        ],
        theme_color:
        [ 
            { required: true, message: '请选择主题颜色', trigger: 'change' }
        ],
      },
    };
  },
  methods: {
    report(){
      let picArr=[]
      picArr[0]=this.headPic
      picArr[1]=this.footPic
      picArr=picArr.concat(this.detailPic)
      let reportForm=JSON.parse(JSON.stringify(this.ruleForm))
      reportForm.is_form=reportForm.is_form?'1':'0'
      reportForm.is_question=reportForm.is_question?'1':'0'
      reportForm.pics=picArr
      if(!reportForm.pics[0]){
        this.$message.error('请上传头图');
        return
      }
      else if(!reportForm.pics[1]){
        this.$message.error('请上传底部悬浮栏');
        return
      }
      else if(!reportForm.pics[2]){
        this.$message.error('请至少上传一张详情图');
        return
      }
      if(reportForm.id){
        updateMd(reportForm).then(res=>{
          this.$message({
          message: '更新成功',
          type: 'success'
        });
        })
        this.$emit('complete')
      }
      else{
        checkNameExists({name:reportForm.name}).then(res=>{
          if(res.data.length!=0){
            this.$message.error('模版名称已存在,请修改');
          }
          else{
            addMd(reportForm).then(res=>{
          this.$message({
          message: '添加成功',
          type: 'success'
        });
        this.$emit('complete')
        })
          }
        })
      
      }
  
    },
    changePrice(e){
      if(e>0){
        this.ruleForm.is_form=true
        this.ruleForm.is_question=false
        this.isQuestionFlag=true
      }
      else{
        this.isQuestionFlag=false
      }
    },
    changeNav(label){
      this.$refs.ruleForm.validate((valid) => {
          if (valid) {
          this.stepRadio=label
          } else {
             this.stepRadio='1'
             this.$message.error('请先完善基本信息');
            return false;
          }
        });
    },
    forSingle(pic,id){  
      if(id==0){
        this.headPic=pic[0]
      }
      else{
        this.footPic=pic[0]
      }
    },
    forGroup(pic){
      this.detailPic=pic
    },
    reset(){
      this.$refs.ruleForm.resetFields();
      this.stepRadio='1'
      this.$emit('closeEvent');
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if(this.ruleForm.price>0){
              this.ruleForm.is_question=false
            }
          this.stepRadio='2'
          } else {
             this.stepRadio='1'
             this.$message.error('请先完善基本信息');
            return false;
          }
        });
      },
    getCardsPriceList(){
      getPriceList().then(res=>{
       this.priceOptions=res.data
      })
    },
    getValue(){
      if(this.updateItem){
      this.ruleForm={
        name:this.updateItem.name,
        id:this.updateItem.id,
        host:this.updateItem.host,
        price:this.updateItem.price,
        is_form:this.updateItem.is_form==1?true:false,
        is_question:this.updateItem.is_question==1?true:false,
        scenes:this.updateItem.scenes,
        host_type:this.updateItem.host_type,
        theme_color:this.updateItem.theme_color,
        pics:this.updateItem.pics,
        domain_id:this.updateItem.domain_id
      }
      this.disabledRadio=true
    }
    if(this.copyItem&&!this.updateItem){
      this.ruleForm={
        name:this.copyItem.name,
        host:this.copyItem.host,
        price:this.copyItem.price,
        is_form:this.copyItem.is_form==1?true:false,
        is_question:this.copyItem.is_question==1?true:false,
        scenes:this.copyItem.scenes,
        host_type:this.copyItem.host_type,
        theme_color:this.copyItem.theme_color,
        pics:this.copyItem.pics,
        domain_id:this.copyItem.domain_id
      }
    }
    if(this.ruleForm.price>0){
        this.isQuestionFlag=true
      }
    }
  },
  watch: {
    closeFlag(newV){ 
      this.getValue()
      if(!newV){
        this.reset()
        this.ruleForm={
        name:'',
        host:'',
        price:'',
        is_form:false,
        is_question:false,
        scenes:0,
        host_type:'',
        theme_color:'',
        pics:[]
      }
      this.disabledRadio=false
      }
    },
  },
  created() {
    this.getCardsPriceList()
    this.getValue()
  },
};
</script>
<style lang="scss" scoped>
.addTemp {
    .top-radio{
       margin: 15px auto;
      display: flex;
      justify-content: center;
      font-size: 16px;
      width: 100%;
      border-radius: 25px;
       .step-item{
        width: 20%;
        text-align: center;
        padding: 5px 0;
        font-weight: 500;
        border-radius: 10px 10px 10px 10px;
        border: 1px solid #b4bccc;
       }
       .active{
        background: #1890ff;
        color: white;
       }
    }
  .site-form {
    width: 80%;
    margin: 0 auto;
    ::v-deep .el-select {
      width: 100%;
    }
  }
  .footer {
      text-align: center;
    }
    .pic{
      width: 100%;
      .pic-title{
        padding: 0 30px;
      }
    }
}
</style>
